<template lang="pug">
  .sendCard
    div.header 剩余房卡数量:{{last}}张
    .group-box.unionname
      .title 发送至：
      .content 
        span ID:
        input(v-model="postForm.rid")
    .group-box.unionname
      .title 发送数量：
      .content 
        input(v-model="postForm.amount")
        span 张    
    .sure
      x-button(:gradients="['#FF9900', '#FF9900']" @click.native="showCreate = true") 确定
    div
      confirm( v-model="showCreate"  :title="'确认发送'+ postForm.amount + '张房卡给ID:'+ postForm.rid"  @on-cancel="onCancel" @on-confirm="confirm")
</template>

<script>
import memberService from '@/api/member'
import router from '@/router'

export default {
  name: 'sendCard',
  data () {
    return {
      showCreate: false,
      last: 20,
      postForm: {
        rid: '',
        amount: 10
      }
    }
  },
  methods: {
    confirm () {
      var that = this
      memberService.SendRoomCard(this.postForm)
        .then(res => {
          this.$vux.alert.show({
            title: '发送房卡成功',
            onHide () {
              that.$router.replace('/index?type=2')
            }
          })
        })
    },
    onCancel () {
      router.replace('/index?type=2')
    }
  },
  created(){
    document.title = '发送房卡'
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
  .group-box{
    width:100%;
    padding:10px 20px;
    overflow: hidden;
    >div{
      float: left;
    }
  }
  .sendCard{
    padding:10px 30px;
    .header{
      font-size: 20px;
      text-align: left;
    }
    .group-box{
      border-radius: 10px;      
      margin-bottom:10px; 
      font-size: 20px;
      padding:0px;
      position: relative;
      .title{
        width: 120px;
        padding:10px 0;
      }
      .content{
        position: absolute;
        padding:10px ;
        margin-left: 130px;        
        background-color:#eee;
        width:100%;
        border-radius: 10px;
        text-align: left;
        // box-sizing: content-box;
      }
      input{
        width: 100px;
        outline: none;
        border: none;
        height: 30px;
        font-size: 20px;
        background-color: #eee;
      }
    }
  }
  
  .sure{
    padding:15px 30px;
  }
</style>
